<!DOCTYPE html>
<html>

<head>
  <title>test</title>
  <style type="text/css">
  div {
    height: 100px;
    width: 100px;
    background: #8bc34a;
    position: absolute;
  }
  </style>
</head>

<body>
  <div></div>
  <script type="text/javascript">
  var div = document.getElementsByTagName('div')[0];

  function loadScript(src, callback) {
    /*
      时间线
      1. 创建document 开始解析dom状态 loading

      2. 遇见css创建线程  解析css
      3. 遇到js 没有async 阻塞 这时documen.write会写到文档后面
      4. 遇到async 的js 开新线程 异步加载 禁止用document.write
      5. 遇到img 开心的线程加载 src
      6. domTree建立完 document.readyState = 'interactive'
      7. 解析完毕后, defer顺序执行(async 没有)
      8. document 触发 DOMContentLoaded  事件从脚本转化为事件驱动
      
      9. img js 都完毕则document.readyState变成 complete
      10. 进入使用阶段

      一. dom
      二. 解析
      三. 加载, 执行完毕
    */
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;
    if (script.readyState) {
      script.onreadystatechange = function() {
        if (script.readyState === 'complete' || script.readyState === 'loaded') {
          callback();
        }
      }
    } else {
      script.onload = function() {
        callback();
      }
    }
    document.body.appendChild(script);
  }

  loadScript('./js/tool.js', function() {
    move(div);
  })
  </script>
</body>

</html>